<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String systemPath = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ systemPath + "/";
%>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

<style type="text/css">
.align-center {
	margin: 0 auto;
	width: 500px;
	text-align: center;
}
</style>
<script language="Javascript">
var jcrop_api; 
var http_request;
jQuery(document).ready(function() {
	jcrop_api = $.Jcrop('#cropbox');
	jQuery('#cropbox').Jcrop({
		//setSelect: [147,130,358,271],
		onChange : showCoords,
		onSelect : showCoords
	});
});

function showCoords(c) {
	jQuery('#x').val(c.x);
	jQuery('#y').val(c.y);
	
	jQuery('#x2').val(c.x2);
	jQuery('#y2').val(c.y2);
	
	jQuery('#w').val(c.w);
	jQuery('#h').val(c.h);
};

function callback() 
{
	if (http_request.readyState == 4)
	 {
		if (http_request.status == 200) 
		{
			var result = http_request.responseText;
			document.getElementById("showImg").style.display='block';
			document.getElementById("cutImg").src = result;
			jcrop_api.release();
		}	
	}
}

function getBrowser(){   
   if(navigator.userAgent.indexOf("MSIE")>0) {   
        return "MSIE";   
   }
   else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){   
        return "Firefox";   
   }
   else if(isSafari=navigator.userAgent.indexOf("Safari")>0) {   
        return "Safari";   
   }
   else if(isCamino=navigator.userAgent.indexOf("Camino")>0){   
        return "Camino";  
   }
   else if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){   
        return "Gecko";   
   }   
} 

function sendRequest() {	
	var x = $("#x").val();
	var y = $("#y").val();
	var x2  = $("#x2").val();
	var y2 = $("#y2").val();
	var w  = $("#w").val();
	var h = $("#h").val();
	var img = $("#img").val();
	if(x==null||x=="" || y==null||y==""|| w==null||w==""|| h==null||h=="")
	{
		alert("请选择需要裁减的区域！");
	}else{
		var btype=getBrowser();
		if(btype!="Firefox"){
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			http_request =new XMLHttpRequest();
		}
		var date =  new Date().getTime(); 
		var parm = "x=" + x + "&y=" + y+ "&x2=" +x2+ "&y2=" +y2+ "&w=" +w+ "&h=" +h+ "&img=" +img+"&";
		var url = "<%=basePath%>/cn/com/ajava/servlet/ServletImage?" + parm + date;
		http_request.open("POST", url, true);
		http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		http_request.onreadystatechange = (btype != "Firefox") ? (callback): (callback());
		http_request.send(null);
		//alert("感谢使用！");
		http_request.onreadystatechange = (btype != "Firefox") ? (callback): (callback());//防止火狐不执行callback
	}
	
}

</script>


</head>
<body>
	<center>
		<div class="align-center">
			<img src="demo_files/flowers.jpg" id="cropbox" />
			<form action="#" method="post">
				X1 <input type="text" size="4" id="x" name="x" /> 
				Y1 <input type="text" size="4" id="y" name="y" /> 
				X2 <input type="text" size="4" id="x2" name="x2" /> 
				Y2 <input type="text" size="4" id="y2" name="y2" />
			    W <input type="text" size="4" id="w" name="w" />
				H <input type="text" size="4" id="h" name="h" /> 
				<input type="hidden" name="img" id="img" value="Jcrop/demo_files/flowers.jpg" /> 
				<input type="button" id="cutButton" onclick="sendRequest()"  value="裁剪">
			</form>
			<div id="showImg" style="display: none;">
				<img id="cutImg" src="" />
			</div>
		</div>
	</center>
</body>

</html>
